import React, { useState, useEffect } from 'react';
import "./index.scss"
import { Button, Form, Select, Input, Table, Modal, DatePicker, notification } from "antd"
import service from '../../../../api';
import { useNavigate } from "react-router-dom"
import { number } from 'echarts';

const { Option } = Select;
const { Search } = Input;
const { RangePicker } = DatePicker;
const Operate = () => {
    var navigate = useNavigate()
    const [form] = Form.useForm();
    var onGenderChange = (value: string) => {
        if (value == '全部计划') {
            getdatalist()
        } else {
            setData(data.filter((item: any) => item.fangshi == value))
        }
    }
    var onzhuangtai = (value: string) => {
        if (value == '全部状态') {
            getdatalist()
        } else {
            setData(data.filter((item: any) => item.zhuangtai == value))
        }
    }
    var onSearch = (value: string) => {
        if (value.trim() == '') {
            getdatalist()
        } else {
            setData(data.filter((item: any) => item.mingcheng.includes(value)))
        }
    };
    var [data, setData] = useState([])
    var [flag, setFlag] = useState(false)
    var [myid, setmyid] = useState()

    //表格
    var columns: any = [
        {
            title: '计划名称',
            dataIndex: 'mingcheng',
            key: 'mingcheng',
        },
        {
            title: '计划方式',
            dataIndex: 'fangshi',
            key: 'fangshi',
        },
        {
            title: '计划时间',
            dataIndex: 'time',
            key: 'time',
        },
        {
            title: '状态',
            dataIndex: 'zhuangtai',
            key: 'zhuangtai',
        },
        {
            title: '操作',
            key: 'caozuo',
            render: (a: any, cold: any, index: any) => <>
                <a onClick={() => { ontoshuju(cold.id) }}>数据</a>
                <a onClick={() => { showModal(cold) }}>编辑</a>
                <a onClick={() => { onremove(cold.id) }}>删除</a>
            </>,
        },
    ]
    useEffect(() => {
        getdatalist()
    }, [])
    var getdatalist = async () => {
        var res = await service.operate.xlq_operatelist()
        if (res.status == 200) {
            res.data.forEach((item: any, index: any) => {
                return item.key = index;
            })
            setData(res.data)
        }
    }
    var ontoshuju = (id: any) => {
        navigate({ pathname: '/index/Operateshuju', search: 'id=' + id });
    }
    //删除
    var onremove = async (id: any) => {
        var res = await service.operate.xlq_operatedelete({ "id": id })
        if (res.status == 200) {
            notification.success({ message: '删除成功' })
            getdatalist()
        } else {
            notification.error({ message: '删除失败' })
        }
    }
    //弹框
    var [isModalOpen, setIsModalOpen] = useState(false);

    var showModal = (cold: any) => {//点击新增
        if (typeof cold.id == 'number') {//说明是编辑
            form.setFieldsValue({ "mingcheng": cold.mingcheng, "fangshi": cold.fangshi, "time": [], "zhuangtai": cold.zhuangtai })
            setmyid(cold.id)
            setFlag(true)
        }
        setIsModalOpen(true);
    };


    var handleCancel = () => {//点击取消
        form.setFieldsValue({ mingcheng: '', fangshi: '', time: [], zhuangtai: '' })
        setFlag(false)
        setIsModalOpen(false);
    };
    //弹框表单
    var onFinish = async (value: any) => {//点击确认新增
        var t = value.time[0].$d.toLocaleString() + '-' + value.time[1].$d.toLocaleString()
        value.time = t;
        var shuju = {
            "Paymentamount": "5363.00",
            "Numberofpayers": 324,
            "PaymentOrder": 564,
            "visitors": 2346,
            "cover": "95.83%",
            "Touch": "65.97%",
            "access": "48.87%",
            "trigger": "12.79%",
            "myechars": {
                "x": [
                    "06/16",
                    "06/17",
                    "06/18",
                    "06/19",
                    "06/20",
                    "06/21",
                    "06/22",
                    "06/23",
                    "06/24",
                    "06/25"
                ],
                "visitor": [
                    2250,
                    3780,
                    5660,
                    6886,
                    7780,
                    2250,
                    3780,
                    5660,
                    6886,
                    7780
                ],
                "payment": [
                    670,
                    980,
                    1798,
                    3675,
                    4230,
                    670,
                    980,
                    1798,
                    3675,
                    4230
                ]
            }
        }
        value.shuju = shuju;
        if (flag) {//说明是编辑
            value.id = 11
            var res = await service.operate.xlq_operatesave({ "id": myid, data: value })
            if (res.status == 200) {
                notification.success({ message: '编辑成功' })
                form.setFieldsValue({ mingcheng: '', fangshi: '', time: [], zhuangtai: '' })
                getdatalist()
                setIsModalOpen(false);
            } else {
                notification.error({ message: '编辑失败' })
            }
        } else {//新增
            var res = await service.operate.xlq_operateadd(value)
            if (res.status == 201) {
                notification.success({ message: '新增成功' })
                form.setFieldsValue({ mingcheng: '', fangshi: '', time: [], zhuangtai: '' })
                getdatalist()
                setIsModalOpen(false);
            } else {
                notification.error({ message: '新增失败' })
            }
        }
    }
    return (
        <div className='operate'>
            {/* 上方导航 */}
            <div className="top">
                <div className="left">
                    <Button type="primary" onClick={showModal}>新建计划</Button>
                </div>
                <div className="right">
                    <Form.Item name="jihua" className='form' >
                        <Select
                            placeholder="全部计划"
                            onChange={onGenderChange}
                        >
                            <Option value="全部计划">全部计划</Option>
                            <Option value="自动长期计划">自动长期计划</Option>
                            <Option value="手动定时计划">手动定时计划</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item name="zhuangtai" className='form'>
                        <Select
                            placeholder="全部状态"
                            onChange={onzhuangtai}
                        >
                            <Option value="全部状态">全部状态</Option>
                            <Option value="未开始">未开始</Option>
                            <Option value="进行中">进行中</Option>
                            <Option value="已结束">已结束</Option>
                            <Option value="已暂停">已暂停</Option>
                        </Select>
                    </Form.Item>
                    <Search placeholder="输入活动名称" onSearch={onSearch} style={{ width: 200 }} />
                </div>
            </div>
            {/* 下方内容表格 */}
            <div className="botmoon">
                <Table columns={columns} dataSource={data} />
            </div>
            {/* 弹框 */}
            <Modal title={flag ? '编辑计划' : '新建计划'} open={isModalOpen} footer={null} onCancel={handleCancel}>
                <Form
                    form={form}
                    name="basic"
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    {/* 计划名称 */}
                    <Form.Item
                        label="计划名称"
                        name="mingcheng"
                        rules={[{ required: true, message: '请输入计划名称!' }]}
                    >
                        <Input />
                    </Form.Item>
                    {/* 计划方式 */}
                    <Form.Item name="fangshi" label="计划方式" rules={[{ required: true, message: '请输入计划方式!' }]}>
                        <Select
                            allowClear
                        >
                            <Option value="自动长期计划">自动长期计划</Option>
                            <Option value="手动定时计划">手动定时计划</Option>
                        </Select>
                    </Form.Item>
                    {/* 计划时间 */}
                    <Form.Item
                        label="计划时间"
                        name="time"
                        rules={[{ required: true, message: '请输入计划名称!' }]}
                    >
                        <RangePicker />
                    </Form.Item>
                    {/*  状态*/}
                    <Form.Item name="zhuangtai" label="状态" rules={[{ required: true, message: '请输入状态!' }]}>
                        <Select
                            allowClear
                        >
                            <Option value="未开始">未开始</Option>
                            <Option value="进行中">进行中</Option>
                            <Option value="已结束">已结束</Option>
                            <Option value="已暂停">已暂停</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 12, span: 16 }}>
                        <Button onClick={handleCancel}>
                            取消
                        </Button>
                        <Button type="primary" htmlType="submit" style={{ marginLeft: 10 }}>
                            {flag ? '确认修改' : '确认新增'}
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
};

export default Operate;